<template>
  <div>
    <button @click.stop="add">加</button>

    <div class="t" id="tt" ref="scrollRef">
      <div v-for="item in list" :key="item.id">
        {{ item.text }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'scroll',
  data() {
    return {
      el: null,
      list: [
        { id: 1, text: '55' },
        { id: 2, text: '55' },
        { id: 3, text: '55' },
        { id: 4, text: '55' },
        { id: 5, text: '55' },
        { id: 6, text: '55' },
        { id: 7, text: '55' },
        { id: 8, text: '55' }
        // { id: 9, text: '55' },
        // { id: 10, text: '55' },
        // { id: 11, text: '55' },
        // { id: 12, text: '55' },
        // { id: 13, text: '55' },
        // { id: 14, text: '55' },
        // { id: 15, text: '55' },
        // { id: 16, text: '55' },
        // { id: 17, text: '55' }
      ]
    };
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.el = document.querySelector('.t');
    //   //   setTimeout(() => {
    //   this.el.dispatchEvent(new Event('scroll'));
    //   //   });
    //   this.te(this.el);
    // });
    //   this.te(con)
  },
  methods: {
    add() {
      //   this.list.push({ id: Math.random(111111111111 * 55.2), text: '1' });

      //   //   this.$nextTick(() => {
      //   const el = document.querySelector('.t');
      //   //     //   setTimeout(() => {
      //   const event = new Event('scroll');
      //   el.dispatchEvent(event);
      //   //     //   });
      //   //   this.el.addEventListener('scroll', this.te(this.el));
      //   this.clickTe(el);
      this.list.push({ id: Math.random(111111111111 * 55.2), text: '1' });
      this.$nextTick(() => {
        const container = this.$el.querySelector('#tt');
        container.scrollTop = container.scrollHeight;
      });
      //   el.removeEventListener('scroll',this.te());
      //   });
    },
   

    // 滚动触发
    // te(e, top) {
    //   try {
    //     console.log(e.target);
    //     if (e.target === 'undefined') {
    //       console.log('滚动');
    //     } else {
    //       console.log('77');
    //     }
    //   } catch (error) {}
    //   //   }

    //   //变量scrollTop是滚动条滚动时，距离顶部的距离
    //   // const conten = this.refs.scollRef;
    //   //   const scrollTop = e.target.scrollTop;
    //   //   //变量windowHeight是可视区的高度
    //   //   var windowHeight = e.target.clientHeight;
    //   //   //变量scrollHeight是滚动条的总高度
    //   //   var scrollHeight = e.target.scrollHeight;

    //   //   console.log(
    //   //     '距顶部' + scrollTop + '可视区高度' + windowHeight + '滚动条总高度' + scrollHeight
    //   //   );
    // }
  }
};
</script>

<style lang="scss" scoped>
.t {
  margin-left: 50px;
  width: 500px;
  height: 200px;
  border: 1px solid pink;
  overflow-y: scroll;
}
</style>
